<template>
  <div id="page">
    {{globalTest}}
    <!-- .right自定义指令的修饰符 -->
    <div class="move-box" v-style:color=testColor  v-move.right="trans">右自定义指令{{msg}}</div>
    <div class="move-box" v-style:background-color=test v-move.left="180">
      左自定义指令
      <span>{{test}}</span>
    </div>
  </div>
</template>

<script>
import _mix from "@/mixin/directive"//引入全局混入
export default {
  name: "pageDirective",
  mixins:[_mix],//使用，类似components的声明
  data() {
    return {
      globalTest: "全局变量",
      trans: 60, //向左移动的距离变量
      testColor: "red",
      num: 1,
      msg: "测试",
      test: "#ddd"
    };
  },
  directives: {
    //当引入mixin混入时，若其中有move自定义指令且不与本组件内自定义指令冲突则进行合并
    // move: {
    //   bind(el, binding, vnode) {
    //     console.log("bind");
    //     console.log(el); //el是DOM结构本身
    //     console.log(binding); //binding是dom相应属性集合，一个对象，包含以下 property：name-指令名；value：指令的绑定值；modifiers：一个包含修饰符的对象。
    //     console.log("虚拟DOM:", vnode);
    //   },

    //   update(el, binding) {
    //     //一般有页面元素发生改变时触发，
    //     console.log(el.innerHTML);
    //     if (binding.value != binding.oldValue) {
    //       console.log("update");
    //       console.log(el.innerHTML);
    //       console.log("当前值：", binding.value);
    //       console.log("旧值：", binding.oldValue);
    //     }
    //   },
    //   componentUpdated(el, binding) {
    //     //页面结构发生改变时才会触发，页面结构改变发生在数据改变之后//对比nextTIck
    //     console.log("componentUpdated");
    //     console.log(el.innerHTML);
    //     // console.log(binding);
    //   },
    //   inserted: function(el, binding) {
    //     console.log("insert");
    //     console.log(binding.value);
    //     var _d = binding.modifiers.left ? "-" : ""; //判断向左划还是向右划，向左为负值，添加"-",向右为正，不添符号
    //     var startX = 0;
    //     var _x = 0;
    //     el.addEventListener(
    //       "touchstart",
    //       function(e) {
    //         _x = startX = e.touches[0].pageX;
    //       },
    //       false
    //     );
    //     el.addEventListener(
    //       "touchmove",
    //       function(e) {
    //         _x = e.touches[0].pageX;
    //       },
    //       false
    //     );
    //     el.addEventListener(
    //       "touchend",
    //       function() {
    //         if (startX >= _x) {
    //           console.log("负值向左：",binding.modifiers.left)
    //           if (binding.modifiers.left) {
    //             // console.log("_d:",_d)
    //             el.style.transform = "translateX(" + _d + binding.value + "px)";
    //           } else {
    //             el.style.transform = "translateX(0)";
    //           }
    //         } else {
    //           console.log("正值向右：",binding.modifiers.left)
    //           if (binding.modifiers.left) {
    //             el.style.transform = "translateX(0)";
    //           } else {
    //             //说明不是向左binding.modifiers.left,而是right
    //             // console.log("_d:",_d)
    //             el.style.transform = "translateX(" + _d + binding.value + "px)";
    //           }
    //         }
    //       },
    //       false
    //     );
    //   }
    // }
  },
  mounted() {
    console.log(this.mix)
    setTimeout(
      function() {
        this.num = 2;
      }.bind(this),
      1000
    );
  }
};
</script>

<style>
#page {
  overflow: hidden;
}
.move-box {
  height: 100px;
  line-height: 100px;
  font-size: 14px;
  text-align: left;
  margin: 10px 0;
  padding: 0 10px;
  box-sizing: border-box;
  color: #000000;
  background: skyblue;
  width: 100%;
  /* transition: all .3s ease; */
  transition: all 0.5s ease;
}
</style>